<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= title %></title>
  <% include partials/head.ejs %>
</head>
<body class="h-100">

<!--NavBar-->
<div class="row mainNav">
  <div class="col-12">
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="#">Hello, <%= user.username %>! </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#" data-toggle="modal" data-target="#aboutModal">About <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">FAQ</a>
          <form action="/logout" method="post">
            <button type="submit" class="btn btn-primary btn-md btn-block">Logout</button>
          </form>
        </div>
      </div>
    </nav>
  </div>
</div>

<% include partials/authModals/signup.ejs %>
<% include partials/authModals/login.ejs %>
<% include partials/aboutModal.ejs %>

<!--Side navigation -->
<!--<div class="sidenav">-->
<!--<a href="#">About</a>-->
<!--<a href="#">Services</a>-->
<!--<a href="#">Clients</a>-->
<!--<a href="#">Contact</a>-->
<!--</div>-->

<!-- Page content -->
<div class="main">
  <div id="map" tabindex="1" class="map"></div>
  <div id="map-marker-popup"></div>
  <div id="help-tool-tip"></div>
  <div id="measure-tool-tip" ></div>
  <div id="mouse-position"></div>
  <div id="popup"></div>

  <!--Selectors for Map Features -->
  <!--Changes Type of Map-->
  <div id="select-map" class="float-left">
    <label for="layer-select" style="color: white;">Map</label>
    <select id="layer-select">
      <option value="normal.day" selected>Normal Day</option>
      <option value="normal.day.transit">Normal Day Transit</option>
      <option value="pedestrian.day">Pedestrian Day</option>
      <option value="hybrid.day">Hybrid Day</option>
      <option value="terrain.day">Terrain Day</option>
      <option value="satellite.day">Satellite Day</option>
      <option value="topo.image">Topographical w/ Satellite</option>
      <option value="topo.day">Topographical</option>
    </select>
  </div>

  <!-- Changes Drawing Type -->
  <div id="draw-geometry">
    <label for="draw-type" style="color: white;">Draw</label>
    <select id="draw-type">
      <option value="Circle">Circle</option>
      <option value="LineString">LineString</option>
      <option value="Polygon">Polygon</option>
      <option value="FreeLine">Freehand</option>
      <option value="FreePoly">Freehand Polygon</option>
      <option value="None" selected>None</option>
    </select>
  </div>

  <!-- SAVE'S USERS MAP  -->
  <button id="saveMap" type="button" class="btn btn-secondary float-right">
    Save
  </button>

  <!-- DONWLOADS -->
  <div id="download" class="float-right">
    <!-- Downloads current map viewport as png -->
    <a id="export-png" class="btn btn-outline-light" role="button" style="color: white"><i class="fas fa-download"  style="color: white"></i> Download PNG</a>
    <!-- Download GeoJSON data -->
    <a id="download-geo" class="btn btn-outline-light" style="color: white" download="features.json"><i class="fas fa-download"  style="color: white"></i> Download GeoJSON</a>
  </div>

  </div>

<% include partials/footer.ejs %>

<script type="module" src="/javascripts/maps/build/main.map.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script type="text/javascript" src="/javascripts/auth/signUp.js"></script>

</body>
</html>
